<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";
import PsbzTable from "@comp/llyy/PsbzTable";
import { onMounted } from "vue";
import { psllList, kbll, psbzList, psbzHeaders } from "@/data/llyy";
import { postJbfaTable } from "@/api/table";

const zddjqy = ref("XX区、XX区、XX区");
const tableData = ref(psllList);
const tableData1 = ref(kbll);
const editorRef10 = shallowRef();
const valueHtml10 = ref("力量编成及部署");
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
const editorRef11 = shallowRef();
const valueHtml11 = ref("扩编力量");
const toolbarConfig11 = {};
const editorConfig11 = { placeholder: "请输入内容..." };
const mode11 = ref("default");
const handleCreated11 = (editor) => {
  editorRef11.value = editor; // 记录 editor 实例，重要！
};

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "力量变成及部署" }).then((res) => {
    const { data } = res;
    valueHtml10.value = data.find((x) => x.k === "力量变成及部署引言")?.v || "";
    valueHtml11.value = data.find((x) => x.k === "扩编力量")?.v || "";
  });
};

// 合并单元格

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  //合并“专业队伍名称”列和“合计(人)”列
  if (columnIndex === 0 || columnIndex === 4) {
    const categoryRowSpan = {
      0: 6, // 抢险抢修组合并6行
      6: 1, // 医疗救护组合并1行
      7: 1, // 消防组合并1行
      8: 1, // 治安组合并1行
      9: 1, // 防化组合并1行
      10: 3, // 防化防疫组合并3行
      13: 1, // 通信组合并1行
      14: 2, // 交通运输组合并2行
      16: 1, // 信息防护组合并1行
    };

    return categoryRowSpan[rowIndex] ? [categoryRowSpan[rowIndex], 1] : [0, 0];
  }

  // 对其他单元格不进行合并
  return [1, 1];
};

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};
const city = window.globalObj.name;

// 人防专业队平时编组统计表
const psList = ref([]);
const getPsData = () => {
  return postJbfaTable("rfzydpsbztjbList").then((res) => {
    if (res.code === 200) {
      psList.value = res?.data || [];
    }
  });
};
// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "力量编成及部署",
      data: [
        {
          k: "力量编成及部署引言",
          v: valueHtml10.value,
        },
        {
          k: "扩编力量",
          v: valueHtml11.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(async () => {
  initHtml();
  await getPsData();
});

onBeforeUnmount(() => {
  if (editorRef10.value) editorRef10.value.destroy();
  if (editorRef11.value) editorRef11.value.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="力量编成及部署" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>

    <FirstTitle name="平时力量" class="top-15" />
    <div class="top-15 zddj text-center">
      {{ city }}人防专业队平时编组统计表
    </div>

    <PsbzTable :headers="psbzHeaders" :tableData="psList" />

    <FirstTitle name="扩编力量" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef11"
        :defaultConfig="toolbarConfig11"
        :mode="mode11"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml11"
        :defaultConfig="editorConfig11"
        :mode="mode11"
        @onCreated="handleCreated11"
      />
    </div>
    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>
